<template>
	<view class="charts-box">
		<u-tabs :list="list1" @click="click"></u-tabs>
		<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{
					name: '30天'
				},
				{
					name: '半年'
				},
				{
					name: '一年'
				},
			],
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				rotate: false,
				rotateLock: false,
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [5, 5, 5, 5],
				dataLabel: true,
				enableScroll: false,
				legend: {
					show: true,
					position: 'right',
					lineHeight: 25
				},
				title: {
					name: '收益率',
					fontSize: 15,
					color: '#666666'
				},
				subtitle: {
					name: '70%',
					fontSize: 25,
					color: '#7cb5ec'
				},
				extra: {
					ring: {
						ringWidth: 30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			}
		};
	},
	mounted() {
		console.log(this.chartData, 'this.chartData');
		this.getServerData();
	},
	onReady() {
		this.getServerData();
	},
	methods: {
		click(item) {
			console.log('item', item);
		},
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
						{
							data: [
								{ name: '一班', value: 50, labelShow: false },
								{ name: '二班', value: 30, labelShow: false },
								{ name: '三班', value: 20, labelShow: false },
								{ name: '四班', value: 18 },
								{ name: '五班', value: 8, labelShow: false }
							]
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 300px;
}
</style>
